<html>
  <head>
    <title>960 Grid - 12 columns</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="css/reset.css" />
    <link type="text/css" rel="stylesheet" href="css/text.css" />
    <link type="text/css" rel="stylesheet" href="css/960.css" />
    <link type="text/css" rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <div class="container_12">
		<!-- Basic -->
		<div class="grid_12 note">Basic</div>
		<div class="grid_2 green_box">
		  grid_2
		</div>
		<div class="grid_4 blue_box">
		  grid_4
		</div>
		<div class="grid_6 green_box">
		  grid_6
		</div>
		<div class="clear"></div>
		<!-- End of Basic -->

		<!-- Push and Pull -->
		<div class="grid_12 note">Push &amp; Pull</div>
		<div class="grid_2 push_1 green_box">
		  grid_2 push_1
		</div>
		<div class="grid_4 blue_box" style="text-align: center;">
		  grid_4
		</div>
		<div class="grid_6 pull_1 green_box">
		  grid_6 pull_1
		</div>
		<div class="clear"></div>
		<!-- End of Push and Pull -->

		<!-- Prefix & Suffix -->
		<div class="grid_12 note">Prefix &amp; Suffix</div>
		<div class="grid_2 prefix_1 green_box">
		  grid_2 prefix_1
		</div>
		<div class="grid_4 blue_box">
		  grid_4
		</div>
		<div class="grid_4 suffix_1 green_box" style="text-align: right;">
		  grid_4 suffix_1
		</div>
		<div class="clear"></div>
		<!-- End of Prefix & Suffix -->

		<!-- Alpha & Omega -->
		<div class="grid_12 note">Alpha &amp; Omega<br />grid_12 (wrap three grid_4)</div>
		<div class="grid_12" style="background-color:gray; padding: 5px 0;">
		<div class="grid_4 alpha green_box">
		  grid_4 alpha
		</div>
		<div class="grid_4 blue_box">
		  grid_4
		</div>
		<div class="grid_4 omega green_box">
		  grid_4 omega
		</div>
		</div>
		<div class="clear"></div>
		<!-- End of Alpha & Omega -->
    </div>
  </body>
</html>
